<template>
	<view class="">
		<view class="orderdetail">
			<view class="time_remaining" v-if="s > 0 && order == 1">剩余支付时间：{{ down_time }}</view>
			<view class="orderdetail_info" @click="tosinguppeople(orderid)">
				<view class="title"><span>报名信息</span></view>
				<view class="user">
					{{ singUpName }}
					<i class="icon">&#xe637;</i>
				</view>
			</view>
			<view class="register_top">
				<view class="register_top_left">
					<image :src="clubInfo.Logo" mode="aspectFill"></image>
					<span>{{ clubInfo.Title }}</span>
				</view>
				<!-- <view class="register_top_right">
					<span>已完成</span>
				</view> -->
			</view>
			<!-- 订单组件 -->
			<order :orderinfo="orderInfo" @lookactive="lookactive"></order>
			<!-- 审核信息 -->
			<view class="audit">
				<view class="audit_bg">
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/mine_statusbg.png" mode="widthFix"></image>
					<view class="audit_contant" v-if="!nosubmit">
						<view class="left">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_wtj01.png" mode=""></image>
							<view class="left_info">
								<view class="top">未提交</view>
								<view class="bot">您参与的任务还未提交</view>
							</view>
						</view>
						<view class="right" @tap="tosubmit(order.active_id)">去提交</view>
					</view>
					<view class="audit_contant" v-else-if="nosubmit && !submitinfo.state">
						<view class="left">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_shz01.png" mode=""></image>
							<view class="left_info">
								<view class="top">审核中</view>
								<view class="bot">任务正在审核中，请耐心等候...</view>
							</view>
						</view>
						<view class="right" @tap="tosubmit(order.active_id)">查看</view>
					</view>
					<view class="audit_contant" v-else-if="nosubmit && submitinfo.state == 2">
						<view class="left">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_sb01.png" mode=""></image>
							<view class="left_info">
								<view class="top">审核不通过</view>
								<view class="bot">对不起，审核不通过，感谢使用平台...</view>
							</view>
						</view>
						<view class="right" @tap="tosubmit(order.active_id)">查看</view>
					</view>
					<view class="audit_contant" v-else-if="nosubmit && submitinfo.state == 1">
						<view class="left">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_tg01.png" mode=""></image>
							<view class="left_info">
								<view class="top">审核通过</view>
								<view class="bot">您发布的任务已审核通过</view>
							</view>
						</view>
						<view class="right" @tap="tosubmit(order.active_id)">查看</view>
					</view>
					<view class="audit_contant" v-else>
						<view class="left">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/renwu_bohui.png" mode=""></image>
							<view class="left_info">
								<view class="top">审核驳回</view>
								<view class="bot">{{ submitinfo.refuse_reason }}</view>
							</view>
						</view>
						<view class="right" @tap="tosubmit(order.active_id)">重新提交</view>
					</view>
				</view>
			</view>

			<view class="order_message">
				<view class="add_service_title">
					<view class="line"></view>
					<text>订单信息</text>
				</view>
				<view class="price_item" v-if="order.out_trade_no">订单编号：{{ order.out_trade_no }}</view>
				<view class="price_item" v-if="order.order_no">交易单号：{{ order.order_no }}</view>
				<view class="price_item" v-if="order.create_time">创建时间：{{ order.create_time }}</view>
				<view class="price_item">支付方式：微信</view>
				<view class="price_item" v-if="order.update_time">支付时间：{{ order.update_time }}</view>
				<view class="price_item" v-if="order.total_price > 0">支付金额：￥{{ order.total_price }}</view>
				<view class="price_item" v-if="order.total_price == 0">支付金额：免费</view>
			</view>

			<!-- 如果是任务未提交状态 会出现一个提交任务按钮 -->
			<!-- <view class="btn" @click="tosubmit">
				去提交
			</view> -->
			<!-- <view class="btn">
				查看任务结果
			</view> -->
			<view class="par_awy" v-if="order.state == 1 && s > 0">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_pay.png" mode=""></image>
				微信支付
			</view>
			<view class="pay_btn" v-if="order.state == 1 && s > 0">
				<view class="pay_btn_l">
					<text>合计金额：</text>
					<text>￥{{ order.total_price }}</text>
				</view>
				<view class="pay_btn_r" @tap="topay">立即支付</view>
			</view>
		</view>
		<!-- 投诉建议 -->
		<view class="suggest" @tap="toSuggest">
			  <image src="../../static/othertwo/suggest.png" mode=""></image><text>投诉</text>
		</view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
</template>

<script>
import order from '../../components/order/order.vue';
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: {
		order,
		loading,
		navigation
	},
	data() {
		return {
			loadflag: true,
			orderinfo: {
				title: '合肥未来塔小组',
				date: '2019-11-18',
				area: '合肥',
				type: '2'
			},
			orderid: '',
			orderInfo: '',
			singuppeople: {},
			order: {},
			nosubmit: '',
			submitinfo: {},
			user_phone: {},
			club_id: '',
			clubInfo: {},
			singupflag: false,
			singupendflag: false,
			pay_end_time: '',
			s: '', // 时间
			down_time: '', // 倒计时时间
			nowTime: '' ,// 当前时间戳
			singUpName: ''
		};
	},
	watch: {
		$route(to, from) {
			//  // console.log (to, from);
			if (from.path == '/pageA/order/submit') {
				this.getresult();
			}
		}
	},
	onLoad(options) {
		this.orderid = options.id;
		this.orderInfo = JSON.parse(options.active);
		this.club_id = options.club_id;
		//  // console.log (this.orderInfo);
	},
	mounted() {
		this.getOrderUser();
		this.getOrderdetail();
		// this.getuserinfo()
		this.getclubInfo();
		this.djs();
	},
	methods: {
		// 查看赛事详情
		lookactive(key) {
			uni.navigateTo({
				url: '/pageA/competiondetail/competitiondetail?id=' + key
			});
		},
		// 投诉建议
		toSuggest() {
			uni.navigateTo({
				url:'/pageA/settings/complaint'
			})
		},
		// 计算倒计时时间
		// 计算倒计时事件
		downtime() {
			var that = this;
			this.nowTime = new Date().getTime();
			//  // console.log (this.pay_end_time);
			//  // console.log (this.nowTime);
			var d_time = parseInt((this.pay_end_time - this.nowTime) / 1000);
			this.s = d_time;
			// var m = parseInt(d_time / 60 % 60)
			// var s = parseInt(d_time % 60);
			// // this.s = parseInt(d_time / 60);
			// if (m < 10 && m >= 0) m = '0' + m
			// if (s < 10 && s >= 0) s = '0' + s
			// this.down_time = m + ':' + s
			//  // console.log (d_time);
		},
		djs() {
			//  // console.log (11);
			setInterval(() => {
				this.s--;
				var m = parseInt((this.s / 60) % 60);
				var s = parseInt(this.s % 60);
				// this.s = parseInt(d_time / 60);
				if (m < 10 && m >= 0) m = '0' + m;
				if (s < 10 && s >= 0) s = '0' + s;
				this.down_time = m + ':' + s;
				// if (this.s <= 0) this.djs_flag = false;
				//  // console.log (this.orderdetail.state)
			}, 1000);
		},
		// 获取用户信息
		getuserinfo() {
			this.ajax('user/userInfo', {
				success: res => {
					//  // console.log (res)
					this.user_phone = res.msg;
				}
			});
		},
		getclubInfo() {
			this.ajax('club/clubInfo', {
				data: {
					id: this.club_id
				},
				success: res => {
					var that = this
					var nowTime = new Date().getTime();
					if (nowTime < this.orderInfo.start_time_c) {
						this.singupflag = true;
					} else if (nowTime > this.orderInfo.end_time_c) {
						this.singupendflag = true;
					}
					 // console.log (res);
					this.clubInfo = res.msg;
					if(this.clubInfo.Logo) this.clubInfo.Logo = this.clubInfo.Logo.replace('http:', "https:")
					var reg = RegExp('/?x-oss-process=image/');
					if(!reg.test(this.clubInfo.Logo)) {
						uni.getImageInfo({
							src:this.clubInfo.Logo,
							success: function (image) {
								if(image.width >image.height) {
									that.clubInfo.Logo = that.clubInfo.Logo+'?x-oss-process=image/rotate,0';
								}
							}
						})
					}
				
				}
			});
		},
		// 提交
		tosubmit(key) {
			if (this.order.state == 1) {
				this.toast('订单未支付');
				return;
			} else if (this.singupflag) {
				this.toast('任务还未开始');
				return;
			}
			uni.navigateTo({
				url: '/pageA/order/submit?id=' + key
			});
		},
		tosinguppeople(key) {
			uni.navigateTo({
				url: '/pageA/order/singuppeople?id=' + key
			});
		},
		// 获取任务状态
		getresult() {
			this.ajax('active/getResult', {
				data: {
					active_id: this.order.active_id
				},
				success: res => {
					//  // console.log (res);
					if (!res.code) {
						this.nosubmit = 0;
					} else {
						this.nosubmit = 1;
						this.submitinfo = res.msg;
					}
					this.loadflag = false;
				}
			});
		},
		// 获取订单信息
		getOrderdetail() {
			this.ajax('order/orderDetail', {
				data: {
					id: this.orderid
				},
				success: res => {
					var creat_time = new Date(res.msg.create_time).getTime();
					this.pay_end_time = creat_time + 1800000;
					// console.log (res);
					this.order = res.msg;
					this.getresult();
					this.downtime();
				}
			});
		},
		// 获取订单报名人员信息
		getOrderUser() {
			var that = this;
			this.ajax('order/orderUser', {
				data: {
					order_id: this.orderid
				},
				success: res => {
					 // console.log (res);
					var info = res.msg[0].form;
					info.forEach( item => {
						if(item.name == '姓名') {
							 // console.log (item.value);
							this.singUpName = item.value
						}
					})
					this.singuppeople = res.msg[0].user_info;
				}
			});
		},
		// 查看任务审核状态
		totaskstatus() {
			uni.navigateTo({
				url: '/pageA/order/taskstatus'
			});
		},
		toeticket() {
			uni.navigateTo({
				url: '/pageA/order/eticket'
			});
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/pageA/order/orderdetail.less');
</style>
<style>
page {
	background-color: #f2f2f2;
}
</style>
